<template>

  <div class="home">
    <van-nav-bar fixed safe-area-inset-top placeholder>
      <template #right>

        <van-search v-model="key" @input="sech" shape="round" placeholder="搜索" input-align="center" />
        <div v-if="key" class="seachlist">

          <div class="sechtext" v-for="item in Sechlist">{{ item.title }}</div>
        </div>
      </template>
    </van-nav-bar>
    <tabars></tabars>
    <van-tabs type="line" line-width="20px" color="green" @click="num">
      <van-tab v-for="(item, inde) in datarsave" :title="item.name">
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">

          <div v-for="iten in datar" style="margin:10px;  margin: auto; border-radius: 15px;">
            <div class="warpjpg" @click="wzlb(iten._id)">
              <p class="text"> {{ iten.title }}</p>
              <div class="jpg" v-for="item in iten.imageSrc"><img class="img1" alt="" v-lazy=item>
              </div>
            </div>
          </div>
        </van-list>

      </van-tab>
    </van-tabs>


  </div>
</template>

<script>
// @ is an alias to /src

import { getLine } from '@/api/home.js'
import tabars from '@/components/bottom'


export default {
  name: 'HomeView',
  components: {
    [tabars.name]: tabars

  },
  data() {
    return {
      active: 0,
      datarsave: [],
      datar: {},
      key: '',
      Sechlist: [],
      loading: false,
      finished: false,
      id: '',
      textnum: 10,
      conent: 0
    }
  },
  mounted() {
    this.getdata()
    this.textlist('610128169b33ed00018ed5df')
    // this.login()



  },
  methods: {
    //首页时把头像和一些东西存进去
    login() {
      console.log('你好世界')
      this.$store.commit('getvuexname', localStorage.getItem('dw-anickname'))
      console.log('网名', this.$store.state.vuexname)
      this.$store.commit('getvuexuserimgsrc', localStorage.getItem('dw-avatar'))

    },
    getdata() {
      getLine('/api/get_cate_list').then(res => {
        let Cfi = res.data.data
        this.datarsave = Cfi
        console.log(this.datarsave)

      })
    },
    textlist(id) {

      // 根据id拿到文章列表 
      this.id = id

      getLine('/api/get_article_list', { cate_id: id, limit: 10 }).then(res => {

        // console.log(res)
        this.datar = res.data.data
        console.log(res)
        // console.log(this.datar)

      })
    }
    ,
    num(i, n) {

      this.textlist(this.datarsave[i]._id)
    },
    wzlb(z) {
      console.log(z)
      this.$router.push({
        path: '/wzlb',
        query: {
          id: z
        }
      })
    },

    sech() {
      getLine("/api/search", { key_word: this.key }).then(res => {
        console.log(res.data.data)
        this.Sechlist = res.data.data

      })
    },

    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        this.loading = false
        this.textnum += 10
        getLine('/api/get_article_list', { cate_id: this.id, skip: this.textnum, limit: 20 }).then(res => {
          this.conent = res.data.data.count
          console.log(res)
          // this.datar = res.data.data
          let a = this.datar.length
          a -= 1
          res.data.data.forEach(v => {
            this.datar.push(v)
          });


          // console.log(this.datar)

        })
        // 加载状态结束

        console.log('开始加载')
        console.log(this.loading)

        // 数据全部加载完成
        if (this.datar.length >= 6000) {

          this.finished = true;
          console.log('加载完毕')
        }
      }, 500);
    },




  },

}
</script>
<style lang="less">
.van-nav-bar__right {
  position: absolute;
  right: 45px;
}

img {


  width: 90%;
  height: 150px;
  float: left;
  margin: 20px;
}

.text {

  margin: 20px;

}

.van-tab {
  border-right: 1px solid rgba(0, 0, 0, 0.234);
  border-bottom: 1px solid rgba(0, 0, 0, 0.234);
  width: 30%;
  position: relative;
  left: -8px;
}

.text {
  position: relative;
  text-align: left;
  width: 90vw;
  word-wrap: break-word;

}

.warpjpg {
  overflow: auto;
  display: flex;
  border-bottom: 1px solid rgba(0, 0, 0, 0.203);
  border-radius: 15px;
  margin-bottom: 20px;
  height: 200px;
  margin: 20px;
}


img {

  height: 100px;
  width: 100px;
  margin: 10px;
}


.seachlist {
  position: absolute;
  top: 50px;
  height: 400px;
  overflow: hidden;
  left: 0;
  right: 0;
  padding: 30px;
  background-color: aliceblue;
}

.sechtext {
  height: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 20px;
}
</style>
